/**
 * Created by Administrator on 2017/2/27.
 */
var Breadcrumb = require('../../../src/libs/breadcrumb');
var Pagination = require('../../../src/libs/pagination');
var ProjectList = require('../complex/projectList');
var Calculator = require('../../../src/libs/calculator');
var Root = React.createClass({
    getInitialState: function(){
        return {
            pageVal: PageDM.pagination.value,
            projectListVal: PageDM.projectList.value,
            interestVal: PageDM.interest.option[0].value,
            durationVal: PageDM.duration.option[0].value,
            projectStatusVal: PageDM.projectStatus.option[0].value
        }
    },
    interestHandler: function(v){
        PageDM.interest.setValue(v);
        PageDM.interest.onClick();
    },
    durationHandler: function(v){
        PageDM.duration.setValue(v);
        PageDM.duration.onClick();
    },
    projectStatusHandler: function(v){
        PageDM.projectStatus.setValue(v);
        PageDM.projectStatus.onClick();
    },
    pageClick:function (v) {
        PageDM.pagination.setValue({curPage:v});
        PageDM.pagination.onClick(v);
    },
    componentDidMount: function(){
        var _this = this;
        UEventHub.on(PageDM.projectList.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                projectListVal: v
            });
        });
        UEventHub.on(PageDM.interest.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                interestVal: v
            });
        });
        UEventHub.on(PageDM.duration.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                durationVal: v
            });
        });
        UEventHub.on(PageDM.projectStatus.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                projectStatusVal: v
            });
        });
        UEventHub.on(PageDM.pagination.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                pagination: v
            });
        });
        //筛选条件，默认为第一个（全部）
        PageDM.interest.setValue(PageDM.interest.option[0].value);
        PageDM.duration.setValue(PageDM.duration.option[0].value);
        PageDM.projectStatus.setValue(PageDM.projectStatus.option[0].value);
        UEventHub.emit("pageLoad","hello world!");
    },
    calculatorHandler: function(){
        this.refs['calculator'].layerOpen();
    },
    render: function(){
        var _this = this;
        return (
            <div>
                <div className="container">
                    <Breadcrumb	separator='>' >
                        <Breadcrumb.Item href={PageDM.URL.home}>首页</Breadcrumb.Item>
                        <Breadcrumb.Item>我要投资</Breadcrumb.Item>
                    </Breadcrumb>
                    <div className="mod-filtrate clearfix">
                        <span className="angle angle-top"></span>
                        <span className="angle angle-bottom"></span>
                        <div className="row">
                            <span className="title">年化利率：</span>
                            <ul ref="interest">
                                {
                                    PageDM.interest.option.map(function(item,index){
                                        var className = "";
                                        if(index == 0){
                                            className = "current";
                                        }else if(index != 0 && item.value==_this.state.interestVal){
                                            className = "curr";
                                        }
                                        return (
                                            <li><a className={className} href="javascript:;" onClick={_this.interestHandler.bind(_this,item.value)}>{item.text}</a></li>
                                        )
                                    })
                                }
                            </ul>
                        </div>
                        <div className="row">
                            <span className="title">投资期限：</span>
                            <ul ref="duration">
                                {
                                    PageDM.duration.option.map(function(item,index){
                                        var className = "";
                                        if(index == 0){
                                            className = "current";
                                        }else if(index != 0 && item.value==_this.state.durationVal){
                                            className = "curr";
                                        }
                                        return (
                                            <li><a className={className} href="javascript:;" onClick={_this.durationHandler.bind(_this,item.value)}>{item.text}</a></li>
                                        )
                                    })
                                }
                            </ul>
                        </div>
                        <div className="row">
                            <span className="title">项目状态：</span>
                            <ul ref="projectStatus">
                                {
                                    PageDM.projectStatus.option.map(function(item,index){
                                        var className = "";
                                        if(index == 0){
                                            className = "current";
                                        }else if(index != 0 && item.value==_this.state.projectStatusVal){
                                            className = "curr";
                                        }
                                        return (
                                            <li><a className={className} href="javascript:;" onClick={_this.projectStatusHandler.bind(_this,item.value)}>{item.text}</a></li>
                                        )
                                    })
                                }
                            </ul>
                        </div>
                        <div className="project-calculator"><a href="javascript:;" className="open-calculator" onClick={_this.calculatorHandler.bind(_this)}><i className="bg-icon"></i> <p>投资计算器</p></a></div>
                    </div>
                    <ProjectList projectList={_this.state.projectListVal}/>
                    <Pagination  pageVal={_this.state.pageVal} onClick={this.pageClick}></Pagination>
                </div>
                <Calculator ref="calculator"  days={PageDM.days.value}/>
            </div>
        )
    }
});
ReactDOM.render(<Root/>, document.getElementById('giraffe'));